<template>
  <div>
    <div class="view-breadcrumb">
      <span v-for="(item,index) in list" :key="index">
        <template v-if="index == 0">
          <a href="javascript:;" @click="go(item)">
            <i class="icon-scrappy-back"></i>{{item.name}}</a>
          <span>/</span>
        </template>

        <template v-else-if="index != list.length - 1">
          <a href="javascript:;" @click="go(item)">
            {{item.name}}
            <span>/</span>
          </a>
        </template>

        <template v-else>
          {{item.name}}
        </template>
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Breadcrumb",
    props: {
      thisName: String,
      parentName: String,
      parentQuery: {
        type: Object,
        default: function () {
          return {};
        }
      },
      userDefined: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        to: "",
        toName: "",
        name: "",
        list: []
      };
    },
    watch: {
      parentName() {
        if (this.parentName && this.parentName != "") {
          if (this.list.length >= 2) {
            this.list[0].name = this.parentName;
          } else {
            this.list.unshift({ name: this.parentName });
          }
        }
      }
    },
    methods: {
      // go() {
      //   if (this.userDefined) {
      //     this.$emit("go");
      //     return;
      //   }
      // },
      getParent(r) {
        if (!r.meta.parent) {
          return null;
        }
        var parentPath = r.meta.parent;
        for (let i = 0; i < this.$router.options.routes.length; i++) {
          let item = this.$router.options.routes[i];
          if (item.path == parentPath) {
            return item;
          }
        }
        return null;
      },
      go(item) {
        var targetComponse = this.$route.matched[0] && this.$route.matched[0].instances.default;
        if (targetComponse && targetComponse.beforeCloseView) {
          targetComponse.beforeCloseView(() => {
            this.goNext(item);
          });
        } else {
          this.goNext(item);
        }

      },
      goNext(item) {
        if (this.userDefined) {
          return this.$emit("go");
        }
        var oComponse =
          this.$route.matched[0] && this.$route.matched[0].components.default;
        var name = oComponse && oComponse.name;
        this.$root.eventHandle.$emit("KEEP_ALIVE_DELETE", name);
        this.$toPage(item.path, item.query);
      },
    },
    mounted() {
      var data = [];
      data.unshift({
        name: this.thisName || this.$route.name
      });
      var parentR = null;
      var currentR = this.$route;
      while ((parentR = this.getParent(currentR)) != null) {
        var name = "";
        if (currentR == this.$route) {
          name = this.parentName || parentR.name;
        } else {
          name = parentR.name;
        }

        data.unshift({
          name: name,
          path: parentR.path,
          query: currentR.meta.parentQuery || this.parentQuery
        });

        currentR = parentR;
      }
      this.list = data;
    }
  };
</script>

<style lang="scss" scoped>
</style>